<template>
  <div class="myHome">
    <div class="header">
      <h3 class="title">加密算法系统</h3>
      <!-- 个人信息 -->
      <el-dropdown>
        <span class="el-dropdown-link" style="color:white">
          当前用户：{{ username }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-button
            :plain="true"
            style="border: none; width: 70px; height: 35px"
            @click="exit()"
          >退出</el-button>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="main">
      <div class="content-left">
        <!-- 左边菜单 -->
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          background-color="white"
          text-color="#000"
          active-text-color="rgb(106, 164, 240)"
        >
          <el-menu-item index="1" @click="tabchange(1)">
            <i class="el-icon-s-custom"></i>
            <span slot="title">文件管理</span>
          </el-menu-item>
          <el-menu-item index="2" @click="tabchange(2)">
            <i class="el-icon-user"></i>
            <span slot="title">上传文件</span>
          </el-menu-item>
          <el-menu-item index="3" @click="tabchange(3)">
            <i class="el-icon-s-custom"></i>
            <span slot="title">密钥生成</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 文件列表 -->
      <div class="content-right" v-if="activeIndex == '1'">
        <div class="searchBtn" style="display: flex">
          <el-input v-model="search" size="big" placeholder="输入文件名搜索" />
          <el-button
            size="small"
            icon="el-icon-search"
            style="height: 40px; display: flex; align-items: center"
            @click="getFileList()"
          ></el-button>
        </div>
        <el-table :data="list" stripe style="width: 100%" v-loading="loading">
          <el-table-column prop="name" label="文件名" width="180"></el-table-column>
          <el-table-column prop="suffix" label="文件类型" width="150"></el-table-column>
          <el-table-column prop="type" label="加密类型" width="150"></el-table-column>
          <el-table-column prop="createByName" label="上传人" width="150"></el-table-column>
          <el-table-column prop="createTime" label="上传时间" width="180"></el-table-column>
          <el-table-column label="文件解密">
            <el-button icon="el-icon-unlock" @click="inputKey()" round>解密</el-button>
          </el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <el-button type="success" icon="el-icon-unlock" @click="downFile(scope.row)">下载</el-button>
              <el-button type="danger" icon="el-icon-delete" @click="deleteFile(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @current-change="getFileList"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          :total="total"
          layout="total, prev, pager, next"
        ></el-pagination>

        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            active-text-color="#fff"
          >
            <el-form-item label="密钥" prop="key">
              <el-input v-model="ruleForm.key"></el-input>
            </el-form-item>
            <el-form-item></el-form-item>
          </el-form>
        </el-dialog>
      </div>

      <div class="content-right" v-if="activeIndex == 2">
        <upload-File></upload-File>
      </div>

      <div class="content-right" v-if="activeIndex == 3">
        <create-key></create-key>
      </div>
    </div>
  </div>
</template>

<script>
import cookie from "js-cookie";
import axios from "../request/axios";
import uploadFile from "../components/uploadFile";
import createKey from "../components/createKey";
import userRequest from "../request/user";
export default {
  data() {
    var key = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("密钥不能为空"));
      } else {
        callback();
      }
    };

    return {
      ruleForm: {
        key: ""
      },

      rules: {
        key: [{ validator: key, trigger: "blur" }]
      },

      userinfo: null,
      username: "",
      activeIndex: "1",
      search: "",
      loading: false,
      dialogVisible: false,
      showComp: true,

      list: [],
      pageNo: "",
      pageSize: 5,
      total: null
    };
  },

  components: {
    uploadFile,
    createKey
  },

  methods: {
    // 菜单切换
    tabchange(index) {
      this.activeIndex = index;
      this.loading = true;
      this.getFileList();
    },

    // 退出
    exit() {
      window.localStorage.removeItem("userinfo");
      cookie.remove("satoken");
      this.$router.push({ path: "/" });
      this.$message.success("注销成功!");
    },

    // 关闭对话框
    clearComp() {
      this.dialogVisible = false;
      this.showComp = false;
    },

    // 显示弹窗
    inputKey() {
      this.dialogVisible = true;
      this.showComp = true;
    },

    //下载文件
    downFile(item) {
      console.log(item);
      window.location.href =
        axios.defaults.baseURL +
        "file/download?fileId=" +
        item.id +
        "&type=" +
        item.type +
        "&key=" +
        this.ruleForm.key;
    },

    // 输入key解密
    submitForm(formName) {
      console.log(formName);
    },

    // 文件列表
    getFileList(page = 1) {
      this.pageNo = page;
      userRequest
        .getFileList({
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          name: this.search
        })
        .then(res => {
          if (res.data.code === 200) {
            const result = res.data.result;
            this.total = result.total;
            this.list = result.records;
            this.list.forEach(s => {
              s.name = s.name.split("_")[1];
            });

            setTimeout(() => {
              this.loading = false;
            }, 500);
          }
        });
    },

    // 删除文件
    deleteFile(item) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          userRequest.deleteFile(item.id).then(res => {
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              this.getFileList();
            }
          });
        })
        .catch(() => {});
    }
  },

  created() {
    this.userinfo = JSON.parse(window.localStorage.getItem("userinfo"));
    if (this.userinfo == null || this.userinfo == "") {
      window.localStorage.removeItem("userinfo");
      cookie.remove("satoken");
      this.$router.push({ path: "/" });
      this.$notify({
        title: "未登录，无法访问",
        type: "warning"
      });
    } else {
      this.username = this.userinfo.realName;
    }
    this.getFileList();
  }
};
</script>

<style lang="scss" scoped>
@import "../css/myHome.scss";
</style>